<template>
  <div>
    <button @click="changeShow">切换动画效果</button>

    <transition>
<!--      <div>当自定义变量show为true时显示（从最小不断变大到原始大小），为false时不断变小直到隐藏</div>-->
      <img
          class="animate__animated animate__bounce"
          style="width: 100px;height: 100px"
          :src="imageList[currentImage]" />
    </transition>
  </div>
</template>

<script>
export default {
  name:'Test02',
  data(){
    return{
      msg: '4444',
      show: false,
      imageList: [
          'https://gjs-resourse.oss-cn-shenzhen.aliyuncs.com/resources/2024/05/img/20.jpg',
          'https://gjs-resourse.oss-cn-shenzhen.aliyuncs.com/resources/2024/05/img/21.jpg',
          'https://gjs-resourse.oss-cn-shenzhen.aliyuncs.com/resources/2024/05/img/22.jpg',
          'https://gjs-resourse.oss-cn-shenzhen.aliyuncs.com/resources/2024/05/img/23.jpg',
          'https://gjs-resourse.oss-cn-shenzhen.aliyuncs.com/resources/2024/05/img/24.jpg',
      ],
      currentImage:0
    }
  },
  methods: {
    changeShow() {
      let randomNum = Math.ceil(Math.random() * this.imageList.length)
      this.currentImage = randomNum
    }
  }
}

</script>

<style scoped>

</style>
